<template>
  <div class="flow">
    <div class="formInfo_info" :style="{ width: '100%' }">
      <TitleComponent title="合同登记" />
      <div class="contract-container">
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="120px"
          label-position="top"
        >
          <!-- 合同信息 -->
          <div class="section">
            <div class="section-title">
              <span>合同信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="员工账号：" prop="employeeInfoId">
                  <el-input
                    disabled
                    v-model="form.userName"
                    placeholder="自动带出"
                  ></el-input>
                  <!-- <el-button @click="InfoClick">员工账号请选择</el-button> -->
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工号：" prop="jobNumber">
                  <el-input
                    disabled
                    v-model="form.jobNumber"
                    placeholder="自动带出"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="合同名称：" prop="contractName">
                  <el-input
                    v-model="form.contractName"
                    placeholder="请输入合同名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合同编号：" prop="contractNo">
                  <el-input
                    v-model="form.contractNo"
                    placeholder="请输入合同编号"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="签订类型：" prop="signType">
                  <el-radio-group v-model="form.signType">
                    <el-radio
                      v-for="(option, index) in sysConcludeType"
                      :key="option.value"
                      :label="option.value"
                      :disabled="true"
                    >
                      {{ option.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合同类型：" prop="contractType">
                  <el-select v-model="form.contractType" placeholder="请选择">
                    <el-option
                      v-for="item in sysContractType"
                      :key="item.value"
                      :label="item.label"
                      :value="Number(item.value)"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- 待定 -->
                <el-form-item label="合同期限（年）：" prop="yearNum">
                  <el-input
                    v-model="form.yearNum"
                    placeholder="合同期限"
                    @input="validateyearNum"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合同签订日期：" prop="contractSignTime">
                  <el-date-picker
                    style="width: 100%"
                    v-model="form.contractSignTime"
                    type="date"
                    placeholder="请选择合同签订日期"
                    @change="handleDateChange"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item
                  label="是否有试用期："
                  prop="isHaveProbationPeriod"
                >
                  <el-radio-group v-model="form.isHaveProbationPeriod">
                    <el-radio
                      v-for="(option, index) in sysWhetherType"
                      :key="index"
                      :label="option.value"
                      :disabled="true"
                    >
                      {{ option.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  prop="probationPeriod"
                  :error="probationPeriodError"
                  v-if="
                    form.isHaveProbationPeriod == 0 && form.contractSignTime
                  "
                >
                  <template #label>
                    <span>
                      <span>试用期期限（月）：</span>
                    </span>
                    <div class="form-tip">
                      试用期期限不满一个月，请手动选择到期日期
                    </div>
                  </template>

                  <el-input
                    v-model="form.probationPeriod"
                    @input="validateProbationPeriod"
                    placeholder="请输入"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="试用期到期日期："
                  prop="probationArriveTime"
                  v-if="
                    form.isHaveProbationPeriod == 0 && form.contractSignTime
                  "
                >
                  <template #label>
                    <span>
                      <span>试用期到期日期：</span>
                    </span>
                    <div class="form-tip">
                      依据试用期期限自动计算，可手动修改
                    </div>
                  </template>
                  <el-date-picker
                    style="width: 100%"
                    v-model="form.probationArriveTime"
                    type="date"
                    placeholder="请选择"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div class="section-title">
            <span>双方信息</span>
          </div>
          <!-- 甲方信息 -->
          <div class="section">
            <div class="section-title">
              <span>甲方信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="公司主体：" prop="companyBody">
                  <el-select v-model="form.companyBody" placeholder="请选择">
                    <el-option label="南京公司" :value="0"></el-option>
                    <el-option label="郑州公司" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="法定代表人：" prop="legalRepresentativeId">
                  <el-select
                    v-model="form.legalRepresentativeId"
                    placeholder="请选择"
                  >
                    <el-option label="法定代表人A" :value="0"></el-option>
                    <el-option label="法定代表人B" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公司地址：" prop="companyAddress">
                  <el-input
                    v-model="form.companyAddress"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 乙方信息 -->
          <div class="section">
            <div class="section-title">
              <span>乙方信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="姓名：" prop="name">
                  <span>{{ form.name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性别：" prop="sex">
                  <span>{{
                    form.sex === 0 ? "男" : form.sex === 1 ? "女" : ""
                  }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="年龄：" prop="age">
                  <span>{{ form.age }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="国籍：" prop="">
                  <span>{{}}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="岗位名称：" prop="applicationPositonName">
                  <span>{{ form.applicationPositonName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="部门：" prop="deptName">
                  <span>{{ form.deptName }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="岗位性质：" prop="JobNature">
                  <span>{{ form.JobNature }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="职级：" prop="PositionLevel">
                  <span>{{ positionLevelLabel }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="直属领导：" prop="directLeaderName">
                  <span>{{ form.directLeaderName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="最高领导：" prop="supremeLeaderName">
                  <span>{{ form.supremeLeaderName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="家庭住址：" prop="homeAddress">
                  <span>{{ form.homeAddress }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 其他信息 -->
            <div class="section">
              <div class="section-title">
                <span>其他信息</span>
              </div>
              <el-table
                :data="form.contractInfoEntities"
                                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="80"
                ></el-table-column>
                <el-table-column
                  prop="startTime"
                  label="合同签订日期"
                ></el-table-column>
                <el-table-column
                  prop="endTime"
                  label="合同到期日期"
                ></el-table-column>
                <el-table-column
                  prop="yearNum"
                  label="合同期限"
                ></el-table-column>
                <el-table-column
                  prop="signingTimes"
                  label="签订次数"
                ></el-table-column>
                <el-table-column
                  prop="contractNo"
                  label="合同编号"
                ></el-table-column>
              </el-table>
            </div>

            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="备注：" prop="laborRelationsRemark">
                  <el-input
                    v-model="form.laborRelationsRemark"
                    type="textarea"
                    placeholder="请输入"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="创建人：" prop="createName">
                  <el-input disabled v-model="form.createName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="创建时间：" prop="createTime">
                  <el-input disabled v-model="form.createTime"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="是否签署竞业限制协议："
                  prop="isSignCompetitionAgreement"
                >
                  <el-radio-group v-model="form.isSignCompetitionAgreement">
                    <el-radio
                      v-for="(option, index) in sysWhetherType"
                      :key="index"
                      :label="option.value"
                      :disabled="true"
                    >
                      {{ option.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="section">
            <div class="section-title">
              <span>附件</span>
            </div>
            <el-form-item label="劳动合同：" prop="contractFile">
              <attachment
                v-if="form.contractFile && form.contractFile != null"
                :employeeResignFileVoList="form.contractFile"
              >
              </attachment>
            </el-form-item>
            <el-form-item label="劳动合同签收确认：" prop="contractSignConfirm">
              <attachment
                v-if="
                  form.contractSignConfirm && form.contractSignConfirm != null
                "
                :employeeResignFileVoList="form.contractSignConfirm"
              >
              </attachment>
            </el-form-item>
            <el-form-item
              label="竞业限制协议附件："
              prop="competitionAgreementFile"
            >
              <attachment
                v-if="
                  form.competitionAgreementFile &&
                  form.competitionAgreementFile != null
                "
                :employeeResignFileVoList="form.competitionAgreementFile"
              >
              </attachment>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import attachment from "@/components/attachment.vue";
import TitleComponent from "@/components/TitleComponent.vue";
import { useRouter } from "vue-router";
import { saveLaborRelationDetails } from "@/api/laborrelations/index.js";
const formRef = ref(null);
const { proxy } = getCurrentInstance();
//获取字典数据
const { sys_conclude_type, sys_whether_type, sys_contract_type } =
  proxy.useDict("sys_conclude_type", "sys_whether_type", "sys_contract_type");
//映射
const levelMap = {
  0: "初级",
  1: "中级",
  2: "高级",
};

// 计算属性：职位级别标签
const positionLevelLabel = computed(
  () => levelMap[form.value.positionLevel] || ""
);
// 通用函数：转换字典数据
const transformDictData = (dictData) => {
  return dictData.value.map((item) => ({
    label: item.label,
    value: Number(item.value), // 确保为数字类型
  }));
};

// 转换字典数据
const sysConcludeType = computed(() => transformDictData(sys_conclude_type));
const sysWhetherType = computed(() => transformDictData(sys_whether_type));
const sysContractType = computed(() => transformDictData(sys_contract_type));

const router = useRouter();
const route = useRoute();
const form = ref({
  employeeInfoId: "",
  employeeName: "",
  // 乙方
  userName: "",
  jobNumber: "", //工号
  name: "", //姓名
  sex: "", //性别
  age: "", //年龄
  applicationPositonName: "", //岗位名称
  deptName: "", //部门
  directLeaderName: "", //直属领导
  supremeLeaderName: "", //最高领导
  contractName: "", //合同名称
  contractNo: "", //合同编号
  signType: "",
  contractType: "",
  yearNum: "", //合同期限
  contractSignTime: "",
  isHaveProbationPeriod: null,
  probationPeriod: "",
  probationArriveTime: "",
  companyBody: "",
  legalRepresentativeId: "",
  companyAddress: "",
  employeeWorkNumber: "",
  positionName: "",
  JobNature: "",
  PositionLevel: "",
  homeAddress: "",
  laborRelationsRemark: "",
  isSignCompetitionAgreement: "",
  contractFile: [],
  contractSignConfirm: [],
  competitionAgreementFile: [],
  createName: "",
  createTime: "",
  contractInfoEntities: [],
});

// 在组件顶部定义需要转换数字类型的字段列表
const NUMBER_FIELDS = new Set([
  "signType",
  "isHaveProbationPeriod",
  "companyBody",
  "legalRepresentativeId",
  "isSignCompetitionAgreement",
]);

// 生命周期钩子优化
onMounted(async () => {
  try {
    const id = route.query.id;
    if (id) await getlaborreDetails(id);
  } catch (error) {
    console.error("初始化加载失败:", error);
  }
});

// 数据获取函数优化
const getlaborreDetails = async (id) => {
  try {
    const { data } = await saveLaborRelationDetails(id);
    if (!data) return;
    // 使用对象解构进行批量处理
    form.value = {
      ...form.value, // 保留原有未覆盖字段
      ...Object.fromEntries(
        Object.entries(data).map(([key, value]) => [
          key,
          NUMBER_FIELDS.has(key) ? Number(value) : value,
        ])
      ),
      // 特殊处理非字符串数字字段
      contractInfoEntities: data.contractInfoEntities || [],
    };

    // 调试信息
    console.debug("表单数据加载完成:", JSON.parse(JSON.stringify(form.value)));
  } catch (error) {
    console.error("获取详情失败:", error);
    throw error; // 抛出错误供上层处理
  }
};

const resetForm = () => {
  router.go(-1);
};
</script>
<style scoped lang="scss">
.contract-container {
  margin: 0 auto;
  padding: 0px 0px 0px 10px;
  background-color: #fff;
  border-radius: 8px;
}

.section {
  margin: 0 0 30px 20px; /* 合并 margin 属性 */
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.el-row {
  margin-bottom: 20px;
}

.button-group {
  margin-top: 20px;
  text-align: center;
}
.section-title {
  font-size: 16px;
  height: 17px;
  line-height: 15px;
  font-weight: bold;
  padding-left: 10px;
  border-left: 3px solid #409eff;
  margin: 15px 0px;

  margin-bottom: 20px;
  color: #303133;
}
.form-tip {
  color: #909399;
  font-size: 12px;
  margin-bottom: 8px;
}
:deep(.el-input__wrapper, .el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-select__wrapper) {
  box-shadow: none !important;
  background: white !important;
  box-shadow: none !important;
}

:deep(.el-select__caret) {
  display: none !important;
}
</style>
